<template>
	<div>
		<div class="header">
			<div class="title">填写报名信息</div>
			<image class="activitypicture" src="../../static/HomePage/activityTb1.JPG" mode=""></image>
			<div class="timeadddress">
				<div class="left">
					<div class="activitydate"><u-icon name="clock"></u-icon>
						<div class="text">2023-09-12-18：00</div>
					</div>
					<div class="activityaddress"><u-icon name="map"></u-icon>
						<div class="text">朝阳区蓝色港湾BlueGlass..</div>
					</div>
				</div>
				<div class="right">
					<div class="share"><u-icon name="share" size="50"></u-icon>
						<div class="text">分享</div>
					</div>
				</div>
			</div>
		</div>
		<div class="center">
			<u-form :model="form" label-position="top" ref="uForm">
				<u-form-item label="手机号码" :border-bottom="false"><u-input border="1px"
						v-model="form.name" /></u-form-item>
				<u-form-item label="真实姓名" :border-bottom="false"><u-input border="1px"
						v-model="form.intro" /></u-form-item>
			</u-form>
			<view class="">
				<u-radio-group>
					<u-radio @change="radioChange" :disabled="bmxzdisabled">
						我已仔细阅读并同意<span style="color:darkgrey;" @click="bmxz">《报名须知》</span>
					</u-radio>
				</u-radio-group>
			</view>
		</div>
		<div class="buttonbar">
			<div class="enroll" @click="applicationshow = true">确认提交</div>
		</div>
	</div>
</template>

<script setup>
	export default {
		data() {
			return {
				bmxzdisabled: false
			};
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 700upx;
		margin: 0 auto;

		.title {
			font-size: 44upx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 32.93px;
			color: rgba(0, 0, 0, 1);
			text-align: left;
			vertical-align: top;
		}

		.activityname {
			margin: 20upx 0upx 0upx 20upx;
			width: 700upx;
			height: 50upx;
			font-size: 48upx;
			font-weight: 400;
			letter-spacing: 3.98upx;
			line-height: 48upx;
			color: rgba(0, 0, 0, 1);
			text-align: left;
			vertical-align: top;
			overflow: hidden;
			white-space: nowrap; //内容超出不换行
			text-overflow: ellipsis;
		}

		.activitypicture {
			margin-top: 20upx;
			width: 700upx;
			height: 312upx;
			opacity: 1;
			border-radius: 40upx;
		}

		.timeadddress {
			display: flex;
			padding-top: 40upx;

			.left {
				flex: 2;

				.activitydate {
					display: flex;

					.text {
						margin-left: 16upx;
						overflow: hidden;
						white-space: nowrap; //内容超出不换行
						text-overflow: ellipsis;
					}
				}

				.activityaddress {
					padding-top: 10upx;
					display: flex;

					.text {
						margin-left: 16upx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						border-bottom: 2upx solid #000;
					}
				}
			}

			.right {
				.share {
					display: flex;
					justify-content: center;
					align-items: center;

					.text {
						font-size: 48upx;
						font-weight: 500;
						letter-spacing: 0upx;
						line-height: 44upx;
						color: rgba(0, 0, 0, 1);
						text-align: left;
					}
				}
			}
		}
	}

	.center {
		width: 700upx;
		margin: 0 auto;
	}

	.buttonbar {
		position: fixed;
		line-height: var(--footer-height);
		top: 1300upx;
		left: 28upx;
		width: 680upx;

		.enroll {
			width: 700upx;
			height: 132upx;
			opacity: 1;
			border-radius: 100upx;
			background: rgba(0, 0, 0, 1);
			font-size: 48upx;
			font-weight: 700;
			letter-spacing: 0px;
			line-height: 132upx;
			color: rgba(255, 255, 255, 1);
			text-align: center;
		}
	}
</style>